<template>
	<div class="dengluzhuce">
		<!-- <div class="pm"></div> -->
		<div class="zuoj"><img src="../../assets/denglu/zuoj.png" alt="" onclick="window.history.go(-1)"></div>
		<div class="lg" align="center">
			<img src="../../assets/denglu/LOGO.png">
		</div>
		<div class="denglu" align="center">
		    <input v-model="username" type="text" placeholder="昵称">

			<input v-model="password1" type="text" placeholder="密码(不少于六位)">
			
			<input v-model="password2" type="text" placeholder="确认密码">
		</div>
		<div class="youke" align="center">
			<button @click="reg">注册音沐</button>
		</div>
		<div class="qita" align="center">点击[注册音沐]按钮,即代表你同意《音沐协议》</div>
		<!-- <div class="qq" align="center">
			
			<ul>
				<li><a href=""><img src="../../assets/denglu/qq.png"><p>QQ</p></a></li>
				<li><a href=""><img src="../../assets/denglu/weixin.png"><p>微信</p></a></li>
				<li><a href=""><img src="../../assets/denglu/weibo.png"><p>微博</p></a></li>
			</ul>
		</div> -->

		
	</div>
</template>

<script>

export default{
	name:"Jinzhuce",
	data(){
		return{
			username:"",
			password1:"",
			password2:""	
		}
    },
    methods:{
    	reg(){

    		if(this.password1!=this.password2){
    			alert("两次密码输入不一致,请重新输入")
    			return;
    		}
    		var url=this.aa+"/createuser"
    		this.$axios.post(url,{
    			username:this.username,
    			password:this.password1
    		})
    		.then(res=>{
    			var tem=res.data.code
    			console.log(res)
    			if(tem==100){
    				alert("注册成功")
    				window.location.href="http://localhost:8080/#/jindenglu"
    			}else if(tem==200){
    				alert("111")
    			}else if(tem==300){
    				alert("用户名已存在,请重新注册")
    				this.username=""
    				this.password1=""
    				this.password2=""
    			}
    		})
    	}
    }
}
</script>

<style scoped lang="less">
.template{

}
.dengluzhuce{
	background: #fff;
}
.pm{
	width: 750/100rem;
	height: 48/100rem;
	background: blue;
}
.zuoj{
	width: 24/100rem;
	height: 38/100rem;
	margin-left: 12/100rem;
}
.lg{
	width: 750/100rem;
	height: 218*2/100rem;
	
	display:table-cell;
	vertical-align:middle;
	text-align:center;
	&>img{
		width: 202/100rem;
		height: 185/100rem;
		vertical-align:middle;	
	}
}
.denglu{
	width: 5.5rem;
    // height: 2.08rem;
    margin: 0 auto;
    
	 input{
		width: 236*2/100rem;
		height: 38*2/100rem;
		line-height:38*2/100rem; 
		margin-top: 15*2/100rem;
		padding-left: 0.8rem;
		background: #fff;
		color: #C0C0C0;
		border: none;
		border-bottom: 1px solid #C0C0C0;
		font-size: 16*2/100rem;
		background: url(../../assets/denglu/shouji.png )no-repeat left ;
		background-size: 0.4rem 0.5rem;
		outline: none;		 
	}
	
	  input:last-child{ 
                background-image: url(../../assets/denglu/suo.png );
            }
	
}
.youke{
	width: 750/100rem;
	height: 1.8rem;
	margin-top: 28*2/100rem;
	button{
	width: 228*2/100rem;
	height: 40*2/100rem;
	color:#A381F4; 
	background: #fff;
	border: 1px solid #A381F4;
	border-radius: 1rem; 
	outline: none;
	font-size:32/100rem;
	}
	
}
.qita{
	width: 750/100rem;
	height: 40*2/100rem;
	
	font-size: 13*2/100rem;
}
.qq{
	width: 636/100rem;
	height: 58*2/100rem;
	font-size: 13*2/100rem;
	&>ul li img{
	width: 80/100rem;
	height: 80/100rem;
	display: inline-block;

	}
	
}
.qq li{
	display: inline-block;
	margin-left: 57*2/100rem;
}	
</style>